<template>
  <view >
    <public-module></public-module>
    <wlk-navbar title="用户提现" navbarType='3'></wlk-navbar>
      <view class="wallet-card bgw mt40 relative overHidden shadow">
          <view class="title">可提现（元）</view>
          <view class="num mt20">
              {{userInfo.money}}
          </view>
          <view class="icon">
              <u-icon name="rmb-circle" color="#FFFFFF" size="20"></u-icon>
          </view>
          <view class="log-btn center shadow" @tap="$Router.push({ path: '/pages/wallet/withdraw-log' })">提现记录</view>
      </view>
      <view class="draw-type br08">
          <u-cell-group :border="false">
              <u-cell :rightIconStyle="{color:'#333',fontWeight:'bold',fontSize:'28rpx'}" :border="false"  >
                  <view class="title" slot="title">
                      提现方式
                  </view>
                  <view class="value wlkflex" slot="value"  @click="show=true" >
                      <view class="wlkflex mr20">
                          <block v-if="withdrawType==null">
                               <text class="col9">请选择提现方式</text>
                          </block>
                          <block v-else>
                              <image v-if="withdrawType==1"  src="/static/images/user/wechat.png"mode="widthFix"/>
                              <view class="ml10">{{withdrawList[withdrawType].name}}</view>
                          </block>

                      </view>
                      <u-icon name="arrow-right" color="#333" bold size="12"></u-icon>
                  </view>
              </u-cell>
          </u-cell-group>
          <view class="otherInfo">
              <view class="wlkflex justify-between">
                  <block  v-if="withdrawType==1">
                      <view class="u-line-1">
                          <text>微信用户</text>
                          <text class="ml05 mr05">|</text>
                          <text>{{$u.test.isEmpty(userInfo.otherAuth)?'未绑定':userInfo.nickname}}</text>
                      </view>
                      <view>
                          <u-button v-if="!$u.test.isEmpty(userInfo.otherAuth)" size="mini" :color="themeColor" shape="circle" type="primary" disabled text="已绑定"></u-button>
                          <u-button v-else size="mini" @click="toBind" :color="themeColor" shape="circle" type="primary" text="去绑定"></u-button>
                      </view>
                  </block>
                  <block v-else-if="withdrawType===0">
                      <view v-if="$u.test.isEmpty(bankInfo)">
                          未绑定银行卡
                      </view>
                      <view v-else class="u-line-1">
                          <text>{{bankInfo.bank_name}}</text>
                          <text class="ml05 mr05">|</text>
                          <text>{{bankInfo.card_no}}</text>
                          <text class="ml05 mr05">|</text>
                          <text>{{bankInfo.real_name}}</text>
                      </view>
                      <view>
                          <u-button size="mini" @click="showBank=true" :color="themeColor" shape="circle" type="primary" :text="$u.test.isEmpty(bankInfo)?'绑定':'修改'"></u-button>
                      </view>
                  </block>
              </view>
          </view>
      </view>
      <view class="draw-money br08 pd30">
          <view class="title">提现金额</view>
          <view class="mt30">
                  <!-- #ifndef APP-NVUE -->
                  <u-input
                  <!-- #endif -->
                  <!-- #ifdef APP-NVUE -->
                  <u--input
                   <!-- #endif -->
                      type="number"
                      v-model="money"
                      prefixIcon="rmb"
                      fontSize="42rpx"
                      :customStyle="{
                            backgroundColor:'#F8F8F8',
                            padding:'20rpx 10rpx',
                            borderRadius:'8px'
                        }"
                      placeholderStyle="font-size:30rpx;color:#c0c4cc"
                      :prefixIconStyle="'font-size: 44rpx;font-weight: bold;'+'color: #333'"
                      placeholder="请输入提现金额"
                      border="none"
              >
              <template slot="suffix">
                  <view class="all" :style="{color:themeColor}" @click="setAll">全部</view>
              </template>
                  <!-- #ifndef APP-NVUE -->
                  </u-input>
                  <!-- #endif -->
                  <!-- #ifdef APP-NVUE -->
                </u--input>
              <!-- #endif -->
          </view>
          <view class="mt40">
              <u-button :customStyle="{
			        width:'92%',
			        boxShadow:boxShadow
                }" :color="linearColor" @tap="confirm" :disabled="money<=0" shape="circle" size="large" text="确认提现"></u-button>
          </view>
      </view>
      <view class="bz-card pd30 br08">
          <view class="remark" v-if="!$u.test.isEmpty(initWithdraw.withdraw_text)">
              <view class="title">提现说明</view>
              <view class="content mt30">
                  <u-parse :content="parseTextWithNewlines(initWithdraw.withdraw_text)"></u-parse>
              </view>
          </view>
      </view>
      <u-popup :show="show" closeable  :round="20" safeAreaInsetBottom closeOnClickOverlay @close="show=false">
          <view class="popup">
              <view class="title">
                  提现方式
              </view>
              <view class="pd30">
                  <u-radio-group
                          v-model="choseType"
                          :borderBottom="true"
                          placement="column"
                          iconPlacement="right"
                          :activeColor="themeColor"
                  >
                      <u-radio
                              size="20"
                              iconSize="16"
                              :customStyle="{padding: '32rpx 0'}"
                              labelSize="14"
                              v-for="(item, index) in withdrawList"
                              :key="index"
                              :label="item.name"
                              :name="index"
                      >
                      </u-radio>
                  </u-radio-group>
              </view>
              <view class="mt40">
                  <u-button :customStyle="{
			        width:'92%',
			        boxShadow:boxShadow
                }" :color="linearColor" @tap="changeType" shape="circle" size="large" text="确定"></u-button>
              </view>
          </view>
      </u-popup>
      <u-popup :show="showBank" closeable  :round="20" safeAreaInsetBottom closeOnClickOverlay @close="showBank=false">
          <view class="bank-popup">
              <view class="title">
                  银行卡信息
              </view>
              <view class="pd30">
                  <u--form
                          labelPosition="left"
                          :model="form"
                          :rules="rules"
                          :labelStyle="{
                            padding:'18rpx 0',
                            fontSize: '28rpx'
                          }"
                          ref="uForm"
                  >
                      <u-form-item
                              labelWidth="70"
                              label="持卡人"
                              prop="real_name"
                              borderBottom
                              ref="item1"
                      >
                          <u--input
                                  :placeholderStyle=placeholderStyle
                                  fontSize="28rpx"
                                  placeholder="请输入持卡人姓名"
                                  v-model="form.real_name"
                                  clearable
                                  border="none"
                          ></u--input>
                      </u-form-item>
                      <u-form-item
                              labelWidth="70"
                              label="开户行"
                              prop="bank_name"
                              borderBottom
                              ref="item1"
                      >
                          <u--input
                                  :placeholderStyle=placeholderStyle
                                  fontSize="28rpx"
                                  placeholder="请输入开户行"
                                  v-model="form.bank_name"
                                  clearable
                                  border="none"
                          ></u--input>
                      </u-form-item>
                      <u-form-item
                              labelWidth="70"
                              label="银行卡号"
                              prop="card_no"
                              borderBottom
                              ref="item1"
                      >
                          <u--input
                                  :placeholderStyle=placeholderStyle
                                  fontSize="28rpx"
                                  type="number"
                                  placeholder="请输入银行卡号"
                                  v-model="form.card_no"
                                  clearable
                                  border="none"
                          ></u--input>
                      </u-form-item>
                  </u--form>
              </view>
              <view class="mt40">
                  <u-button :customStyle="{
			        width:'92%',
			        boxShadow:boxShadow
                }" :color="linearColor" @tap="editBank" shape="circle" size="large" text="保存"></u-button>
              </view>
          </view>
      </u-popup>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import {rgbaToRgb,toUrl} from '@/wlkutils/tools';
import platform from '@/wlkutils/platform';
export default {
        computed: {
            ...mapGetters(['userInfo', 'initWithdraw','themeColor'])
        },
        data() {
          return {
            money: '', //提现金额
            show:false,
            showBank:false,
            withdrawType: null,
            choseType:1,
            platform:platform.get(),
            withdrawList:[
                {
                    type:'bank',
                    name: '银行转账',
                    disabled: false
                },
                {
                    type:'wechat',
                    name: '微信零钱',
                    disabled: false
                },
            ],
            linearColor:'',
            boxShadow:'0 2px 4px rgba(0,0,0,.06)',
            placeholderStyle:'fontSize: 28rpx;color:#c0c4cc',
            bankInfo: {}, //银行卡信息
            form:{
                real_name: '',
                bank_name: '',
                card_no: ''
            },
            rules: {
                // 字段名称
                real_name: [
                    {
                        required: true,
                        message: '请输入持卡人',
                        trigger: ['change','blur'],
                    },
                    {
                        validator: (rule, value, callback) => {
                            //返回true表示校验通过，返回false表示不通过
                            return uni.$u.test.chinese(value);
                        },
                        message: '请输入汉字',
                        trigger: ['change','blur'],
                    }
                ],
                bank_name: [
                    {
                        required: true,
                        message: '请输入开户行',
                        trigger: ['change','blur'],
                    },
                    {
                        validator: (rule, value, callback) => {
                            //返回true表示校验通过，返回false表示不通过
                            return uni.$u.test.chinese(value);
                        },
                        message: '请输入汉字',
                        trigger: ['change','blur'],
                    }
                ],
                card_no: [
                    {
                        required: true,
                        message: '请输入银行卡号',
                        trigger: ['change','blur'],
                    },
                    {
                        validator: (rule, value, callback) => {
                            //返回true表示校验通过，返回false表示不通过
                            return uni.$u.test.number(value);
                        },
                        message: '请输入正确的银行卡号',
                        trigger: ['change','blur'],
                    }
                ],
            },
          };
        },

        onLoad() {},
        onShow() {
            this.linearColor = 'linear-gradient(to right,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';
            this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), .2);
        },
        watch:{
            themeColor(val) {
                this.linearColor = 'linear-gradient(to right,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
                this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(val), .2);
            },
        },
        methods: {
            setAll(){
                if(this.userInfo.money>0){
                    this.money = this.userInfo.money;
                }
            },
            changeType(){
                this.withdrawType = this.choseType;
                this.show = false;
                if(this.withdrawType==0){
                    this.getBankInfo();
                }
            },
            parseTextWithNewlines(text) {
              return text.replace(/\n/g, "<br>");
            },
            confirm() {
              let that = this;
              if (this.withdrawType === null) {
                this.$u.toast('请选择提现方式');
                return;
              }
              if (this.money <= 0) {
                this.$u.toast('请输入提现金额');
                return;
              }
              if(this.$u.test.isEmpty(this.userInfo.otherAuth) && this.withdrawType==1){
                  this.$u.toast('请先绑定微信帐号');
                  return;
              }
              if (!Object.keys(this.bankInfo).length > 0 && this.withdrawType==0){
                this.$u.toast('请先设置银行信息');
                return;
              }

              uni.$u.http.post('wallet/apply', {
                type: that.withdrawList[that.withdrawType].type,
                money: that.money
              }).then(res => {
                that.money = '';
                that.$store.dispatch('getUserInfo');
                uni.$u.toast('申请成功');
              }).catch(res => {
              })

            },
            editBank() {
                let that = this;
                this.$refs.uForm.validate().then(res => {
                    uni.$u.http.post('wallet/editBank', that.form).then(res => {
                        that.bankInfo =res.data;
                        that.showBank = false;
                        uni.$u.toast('操作成功');
                    }).catch(res => {
                    })
                })

            },
            getBankInfo() {
              let that = this;
              uni.$u.http.post('wallet/bankInfo', {
              }).then(res => {
                if (res.data){
                  that.bankInfo = JSON.parse(JSON.stringify(res.data));
                  that.form = JSON.parse(JSON.stringify(res.data));
                }
              }).catch(res => {
              })
            },
            toBind(){
                if(this.platform == 'H5'){
                    uni.$u.toast('请在微信浏览器打开');
                }else{
                    toUrl('/pages/user/info')
                }

            }

        }
};
</script>
<style lang="scss">
    page{
        .wallet-card{
            width: 92%;
            margin: 40rpx auto auto auto;
            height: 300rpx;
            border-radius: 20px;
            background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
            padding: 50rpx 35rpx;
            .title{
                font-size: $font-lt;
            }
            .num{
                font-size: 50rpx;
                font-weight: bold;
            }
            .icon{
                background: linear-gradient(to left bottom, #ffae86, #ff7d67);
                padding: 15rpx 30rpx;
                border-radius: 20px 0 20px 4px;
                overflow: hidden;
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 0;
                right: 0;
                box-shadow: -8px 3px 0 #F6E8E5;
            }
            .log-btn{
                padding: 10rpx 20rpx;
                border-radius: 40rpx 0 0 40rpx;
                position: absolute;
                right: 0;
                top: 50rpx;
                background-color: #FFFFFF;
                color: $uni-text-color-grey;
                border-right: none;
                font-size: $font-sm;
            }
        }
        .draw-type{
            background-color: #FFFFFF;
            border-radius: 12rpx;
            width: 92%;
            padding: 30rpx 0;
            margin: 40rpx auto auto auto;
            .title{
                color: #333;
                font-size: $font-base;
                font-weight: 500;
            }
            .value{
                color: #333;
                font-size: $font-base;
                image{
                    width: 35rpx;
                }
            }
            .otherInfo{
                font-size: $font-sm;
                padding: 0 30rpx;
                color: $uni-text-color-grey;
            }
        }
        .draw-money{
            background-color: #FFFFFF;
            border-radius: 12rpx;
            width: 92%;
            margin: 40rpx auto auto auto;
            .title{
                color: #333;
                font-size: $font-lt;
                font-weight: 500;
            }
            .all{
                padding: 0 10rpx;
                font-size: $font-base;
            }
        }
        .bz-card{
            background-color: #FFFFFF;
            width: 92%;
            margin: 40rpx auto auto auto;
            .remark{
                .title{
                    font-size: $font-lt;
                    font-weight: 500;
                }
                .content{
                    color: $uni-text-color-grey;
                    font-size: $font-sm;
                }
            }
        }
        .popup{
            height:550rpx;
            .title{
                border-radius: 20px;
                line-height: 90rpx;
                text-align: center;
                background-color: #FFFFFF;
            }
            .value{
                color: #333;
                font-size: $font-base;
            }
        }
        .bank-popup{
            height:750rpx;
            .title{
                border-radius: 20px;
                line-height: 90rpx;
                text-align: center;
                background-color: #FFFFFF;
            }
        }
    }
</style>
